{extend name='public/base'/}
{block name='header'}{/block} {//关掉头部}
{block name='menu'}{/block} {//关掉菜单}
{block name='seo'}
<title>{$title|default="标题"}</title>
<meta name="keywords" content="{$keywords|default='关键字'}">
<meta name="description" content="{$desc|default='描述'}">
<!--图片点击弹窗放大显示-->
<style>
   img {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 5px;
    }

   *{
       padding: 0px;
       margin: 0px;
   }
   .cloes-tag {
       position: absolute;
       right: 20px;
       top: 20px;
       width: 20px;
       height: 20px;
       border: none;
       cursor: pointer;
       -webkit-transition: all 1s;
       -ms-transition: all 1s;
       -moz-transition: all 1s;
       -o-transition: all 1s;
       transition: all 1s;
   }
   .cloes-tag:before,
   .cloes-tag:after {
       content: '';
       position: absolute;
       background-color: #a9a9a9;
       transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       -webkit-transform: rotate(45deg);
       -o-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
   }
   .cloes-tag:before {
       left: 45%;
       top: -10%;
       width: 10%;
       height: 120%;
   }
   .cloes-tag:after {
       top: 45%;
       left: -10%;
       width: 120%;
       height: 10%;
   }
   img{
       width: 60%;
       height: auto;
       cursor: pointer;
   }
   .window{
       position: fixed;
       width: 100%;
       height: 100%;
       left: 50%;
       top: 50%;
       visibility: hidden;
       opacity: 0;
       background-color: white;
       -webkit-transition: all 0.6s;
       -webkit-transform: translateX(-50%) translateY(-50%) scale(0.6);
   }
   .window img{
       width: 85%;
       height: 100%;
   }
   .window-show{
       visibility: visible;
       opacity: 1;
       -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
       text-align: center;
   }

</style>
{/block}

{block name='content'}
<article class="cl pd-20">

    <form action="" method="post" class="form form-horizontal" id="form-file-edit">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>班级：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$file_info.class}"  placeholder="" id="class" name="class">
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>学期：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="{$file_info.times}"  placeholder="" id="times" name="times">
            </div>
        </div>


        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>内容：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div>
                    <p style="font-family: 华文隶书;font-size: 18px">点击放大:</p>
                    <img src='__UPLOAD__/{$file_info.filepath}' width="100%" alt="" class="pic"/>
                    <div class="window">
                        <div class="cloes-tag"></div>
                        <img src="__UPLOAD__/{$file_info.filepath}">
                    </div>
                </div>
            </div>
        </div>

        <!--将当前记录的id做为隐藏域发送到服务器-->
        <input type="hidden" value="{$file_info.id}" name="id">

        {eq name="$Think.session.user_info.role" value="0"}
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius disabled" type="button" value="&nbsp;&nbsp;提交&nbsp;&nbsp;" id="submit" >
            </div>
        </div>
        {/eq}
    </form>


</article>
{/block}

{block name='js'}
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/messages_zh.js"></script>




<script>

    $(function(){
        //当用户修改了输入框内容时才触发
        $("form").children().change(function(){
            $("#submit").removeClass('disabled');
        });

        //ajax方式提交当前表单数据
        $("#submit").on("click", function(event){
            $.ajax({
                type: "POST",
                url: "{:url('file/editFile')}",
                data: $("#form-file-edit").serialize(),
                dataType: "json",
                success: function(data){
                    if (data.status == 1) {
                        alert(data.message);

                    } else {
                        alert(data.message);

                    }
                }
            });

        })
    })
</script>

<!--图片点击弹窗放大显示-->
<script>
    var $ = function( obj ){
        return document.querySelector( obj );
    }
    $('img').addEventListener('click', function(){
        $('.window').classList.add('window-show');
    }, false)
    $('.cloes-tag').addEventListener('click', function(){
        $('.window').classList.remove('window-show');
    }, false)
</script>

{/block}

</body>
</html>